*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.clearfix::before,
.clearfix::after{
    content:"";
    height: 0;
    line-height: 0;
    display: block;
    visibility: none;
    clear: both;
}
@w:100px;
@h:100px;
#recharge{
    background: rgba(0,191,255,.3);
    overflow: hidden;
    .recharge-box{
        width: @w * 12;
        margin: 100px auto;
        border-radius: 20px;
        background: #fff;
        margin-top: 32px;
        padding-bottom: 80px;
        padding-top: 48px;
        #recharge-box-navgation{
           .recharge-box-navgation-li1{
                .recharge-box-navgation-li1-span{
                    margin-right: 10px;
                    cursor: pointer;
                    color: #999;
                    margin-left: @w * .5;
                    font-weight: bold;
                }
                .recharge-box-navgation-li1-span1{
                    cursor: pointer;
                    color: #999;
                    margin-left: 20px;
                    font-weight: bold;
                }
           } 
           .recharge-box-navgation-li2{
               width: @w * 11.2;
               border-bottom: 1px solid #eeeeee;
               margin-top: 20px;
               margin-left: 43px;
           }
           .recharge-box-navgation-li3{
                margin: 5px 0 5px 80px;
                .recharge-box-navgation-li3-span{
                    width: 126px;
                    height: 50px;
                    padding: 21px 0 0 33px;
                    font-size: 16px;
                    line-height: 50px;
                    vertical-align: top;
                    color: #333;
                }
                span{
                    width: 126px;
                    height: 50px;
                    padding: 21px 0 0 54px;
                    font-size: 16px;
                    line-height: 50px;
                    vertical-align: top;
                    color:red;
                }
           }
           .recharge-box-navgation-li4{
            margin: 5px 0 5px 80px;
            p{
                font-size: 16px;
                line-height: 50px;
                color: #333;
                vertical-align: top;
                width: 126px;
                height: 50px;
                padding: 21px 0 0 33px;
                float: left;
            }
            .recharge-box-navgation-li4-div{
                padding: 34px 0 0 33px;
                position: relative;
                .recharge-box-navgation-li4-div-span{
                    margin-right: 14px;
                    padding: 19px 30px;
                    font-size: 16px;
                    cursor: pointer;
                    border: 1px solid #e1e1e1;
                    &:hover{
                        border: 1px solid #f5501e;
                        img{
                            display: block
                        }
                    }
                    img{
                        position: absolute;
                        left: 211px;
                        top: 58px;
                        display: none;
                    }
                }
                .recharge-box-navgation-li4-div-span1{
                    margin-right: 14px;
                    padding: 19px 30px;
                    font-size: 16px;
                    cursor: pointer;
                    border: 1px solid #e1e1e1;
                    &:hover{
                        border: 1px solid #f5501e;
                        img{
                            display: block
                        }
                    }
                    img{
                        position: absolute;
                        left: 325px;
                        top: 58px;
                        display: none;
                    }
                }
                .recharge-box-navgation-li4-div-span2{
                    margin-right: 14px;
                    padding: 19px 30px;
                    font-size: 16px;
                    cursor: pointer;
                    border: 1px solid #e1e1e1;
                    &:hover{
                        border: 1px solid #f5501e;
                        img{
                            display: block
                        }
                    }
                    img{
                        position: absolute;
                        left: 448px;
                        top: 58px;
                        display: none;
                    }
                }
                .recharge-box-navgation-li4-div-span3{
                    margin-right: 14px;
                    padding: 19px 30px;
                    font-size: 16px;
                    cursor: pointer;
                    border: 1px solid #e1e1e1;
                    &:hover{
                        border: 1px solid #f5501e;
                        img{
                            display: block
                        }
                    }
                    img{
                        position: absolute;
                        left: 571px;
                        top: 58px;
                        display: none;
                    }
                }
                .recharge-box-navgation-li4-div-span4{
                    margin-right: 14px;
                    padding: 19px 30px;
                    font-size: 16px;
                    cursor: pointer;
                    border: 1px solid #e1e1e1;
                    &:hover{
                        border: 1px solid #f5501e;
                        img{
                            display: block
                        }
                    }
                    img{
                        position: absolute;
                        left:703px;
                        top: 58px;
                        display: none;
                    }
                }
                .recharge-box-navgation-li4-div-span5{
                    margin-right: 14px;
                    padding: 19px 30px;
                    font-size: 16px;
                    cursor: pointer;
                    border: 1px solid #e1e1e1;
                    &:hover{
                        border: 1px solid #f5501e;
                        img{
                            display: block
                        }
                    }
                    img{
                        position: absolute;
                        left: 835px;
                        top: 58px;
                        display: none;
                    }
                }
                .recharge-box-navgation-li4-div-span6{
                    margin-right: 14px;
                    padding: 19px 30px;
                    font-size: 16px;
                    cursor: pointer;
                    border: 1px solid #e1e1e1;
                    &:hover{
                        border: 1px solid #f5501e;
                        img{
                            display: block
                        }
                    }
                    img{
                        position: absolute;
                        left:963px;
                        top: 58px;
                        display: none;
                    }
                }
            }
            .recharge-box-navgation-li4-div2{
                position: relative;
                top: 23px;
                left: 158px;
                input{
                    width: 130px;
                    height: 60px;
                    border: 1px solid #e1e1e1;
                    font-size: 16px;
                    text-align: center;
                    position: absolute;
                    top: 18px;
                    left: 0;
                }
                div{
                    width: 130px;
                    height: 60px;
                    line-height: 58px;
                    display: inline-block;
                    color: #666666;
                    border: 1px solid #e1e1e1;
                    text-align: center;
                    position: absolute;
                    top: 18px;
                    left: 131px;
                }
            }
           }
           .recharge-box-navgation-li5{
                margin: 36px 0 5px 111px;
                div{
                    float: left;
                    margin-top: 20px;
                }
                .recharge-box-navgation-li5-span{
                    position: relative;
                    display: inline-block;
                    margin-right: 20px;
                    margin-left: 55px;
                    padding: 19px 26px;
                    cursor: pointer;
                    border: 1px solid #f5501e;
                    &:hover{
                        border: 1px solid #f5501e;
                        .recharge-box-navgation-li5-icon1{
                            display: block
                        }
                    }
                    .recharge-box-navgation-li5-icon{
                        vertical-align: middle;
                    }
                    .recharge-box-navgation-li5-icon1{
                        position: absolute;
                        top: 45px;
                        left: 111px;
                    }
                }
                .recharge-box-navgation-li5-span1{
                    position: relative;
                    display: inline-block;
                    padding: 19px 34px;
                    cursor: pointer;
                    border: 1px solid #e1e1e1;
                    &:hover{
                        border: 1px solid #f5501e;
                        .recharge-box-navgation-li5-icon1{
                            display: block
                        }
                    }
                    .recharge-box-navgation-li5-icon{
                        vertical-align: middle;
                    }
                    .recharge-box-navgation-li5-icon1{
                        position: absolute;
                        top: 45px;
                        left: 111px;
                        display: none;
                    }
                }
           }
           .recharge-box-navgation-li6{
            margin: 41px 0 5px 282px;
            width: 200px;
            height: 50px;
            background: #f5501e;
            border-radius: 7px;
            text-align: center;
            line-height: 50px;
            a{
                text-decoration: none;
                color: #fff;
            }
           }
           .recharge-box-navgation-li7{
            margin: 22px 0 5px 291px;
            font-size: 12px;
           }
           .recharge-box-navgation-li8{
            margin: 43px 0 5px 80px;
            .recharge-box-navgation-li8-span{
                width: 126px;
                height: 50px;
                padding: 21px 0 0 33px;
                font-size: 16px;
                line-height: 50px;
                vertical-align: top;
                color: #333;
            }
            span{
                width: 126px;
                height: 50px;
                padding: 21px 0 0 54px;
                font-size: 16px;
                line-height: 50px;
                vertical-align: top;
                color:red;
            }
       }
        }
    }
}
